<template>
  <div class="information-box">
    <ActicleItem :article="article" :nextActicleDetail="nextActicleDetail" :advertsItem="advertsItem" />
    <NextActicleItem :article="nItem" v-for="(nItem, nIndex) of moreArticles" :key="nIndex" />
    <!-- 联系我们 -->
    <ContactUs />
  </div>
</template>

<script>
// 联系我们
import ContactUs from "@/components/ContactUs";
import ActicleItem from '@/views/informationDetail/components/ActicleItem';
import NextActicleItem from '@/views/informationDetail/components/NextActicleItem';

import {
  articlesDetail,
  advertsList,
  articlesRead,
  articlesNextPre
} from "@/api/api";
import moment from "moment";
moment.locale("zh-cn");

export default {
  components: {
    ContactUs,
    ActicleItem,
    NextActicleItem
  },
  data() {
    return {
      advertsItem: {},
      article: {},
      nextActicleDetail: {
        title: "",
        content: "",
        date: "",
        uuid: "",
      },
      moreArticles: [],
      nextuuid: this.$route.query.uuid
    };
  },
  created() {
    window.addEventListener('scroll', this.Scrollbottom);
  },
  mounted() {
    const uuid = this.$route.query.uuid;
    this.getDetail(uuid);
    this.submitRead(uuid);
    this.getAdverts();
    this.getActiclesNextPre(uuid);
  },
  destroyed() { 
    window.removeEventListener('scroll', this.Scrollbottom)//页面离开后销毁监听事件
  },
  computed: {
    uuid() {
      return this.$route.query.uuid;
    },
  },
  watch: {
    uuid(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        const uuid = this.$route.query.uuid;
        this.getDetail(uuid);
        this.submitRead(uuid);
        this.getActiclesNextPre(uuid);
      }
    }
  },
  methods: {
    Scrollbottom () { 
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
          this.getActiclesNextPre(this.nextuuid);
        }
    },
    tagToDetail(item) {
      const params = {
        keywords: item.name,
        type: "tag",
        tagId: item.uuid
      };
      let routerJump = this.$router.resolve({
        name: "Search",
        query: params,
      });
      window.open(routerJump.href, "_blank");
    },
    // 获取上一篇，下一篇
    async getActiclesNextPre(uuid) {
      const res = await articlesNextPre(uuid);
      if (res.next) {
        this.nextActicleDetail.title = res.next.name;
        this.nextActicleDetail.content = res.next.summary;
        this.nextActicleDetail.date = this.formatDate(res.next.lastUpdate);
        this.nextActicleDetail.uuid = res.next.uuid;
        this.nextuuid = res.next.uuid;
        this.moreArticles.push(res.next);
      }
    },
    // 广告跳转详情
    onDetail(uuid) {
      let routerJump = this.$router.resolve({
        name: "InformationDetail",
        query: { uuid },
      });
      window.open(routerJump.href, "_blank");
    },
    // 获取右侧广告
    async getAdverts() {
      const params = {
        status: 1,
        pageType: "ZX_DETAIL_PAGE",
        type: "SIDE",
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.advertsItem = res.list[randomIndex];
      }
    },
    // 通过UUId 获取文章详情
    async getDetail(uuid) {
      const res = await articlesDetail(uuid);
      this.article = res.article;
      let head = document.getElementsByTagName('head');
      let meta = document.createElement('meta');
      document.querySelector('meta[name="keywords"]').setAttribute('content', res.article.name)
      document.querySelector('meta[name="description"]').setAttribute('content', res.article.summary)
      head[0].appendChild(meta)
    },
    // 标记文章已读
    async submitRead(uuid) {
      await articlesRead(uuid);
    },
    // 处理时间
    formatDate(date) {
      return moment(date).format("ll");
    },
  },
};
</script>

<style lang="scss" scoped>
.information-box {
  background: #f1f1f1;
  padding-top: 40px;
}
</style>